<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>first</title>
		<meta name="generator" content="Studio 3 http://aptana.com/">
		<meta name="author" content="Awais">
		<!-- Date: 2011-08-03 -->
	</head>
	<script src="jquery-1.6.2.min.js"></script>
	<script src="jquery-ui-1.8.14.custom.min.js"></script>
	<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.14.custom.css"/>
	
	<style>
	.column { width: 170px; float: left; padding-bottom: 100px; margin:0 0.1em 0 0.1em; }
	.portlet { margin: 0 1em 1em 0; float:left;width: 170px;}
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; width:170px !important; height: 50px !important; }
	
	</style>
	
<script>
	
	$(function() {
		
		function adjustWidth(event,ui){
			var x=event.target;
							var p=$(x).parent();
								var maxwidth=ui.size.width;
								for (var i=0; i < $(x).siblings('.portlet').length; i++) {
								  var jportlet=$(x).siblings('.portlet')[i];
								  if(maxwidth<$(jportlet).outerWidth()){
									  maxwidth=$(jportlet).outerWidth();
								  }
								  else{
									 if(($(p).outerWidth()-$(jportlet).outerWidth())>170){
									 	
									 	}
									}
								};
								//setting parent .column width.
					$(p).animate({width:maxwidth,},500); //time of animation 0.5sec	
		}
		
		function adjustWidthAfterRecieve(event,ui){
			var x=event.target;
			var maxwidth=$(x).outerWidth();
			if(maxwidth<ui.item.outerWidth()){
					maxwidth=ui.item.outerWidth();
			}
			//setting parent .column width.
			$(x).animate({width:maxwidth,},500); //time of animation 0.5sec	
									
		}
		
		function adjustWidthAfterRemove(event){
			var p=event.target;
			
			var minWidth=0;
			
			for (var i=0; i < $(p).children('.portlet').length; i++) {
				var jportlet=$(p).children('.portlet')[i];
				if(minWidth<$(jportlet).outerWidth()){
					minWidth=$(jportlet).outerWidth();
				}
			};
			//alert(maxWidth);
			$(p).animate({width:minWidth,},500); //time of animation 0.5sec	
			
		}
		
		
		$( ".column" ).sortable({
			connectWith: ".column",
			remove:function(event,ui){
				adjustWidthAfterRemove(event);
			},
			receive:function(event,ui){
				adjustWidthAfterRecieve(event,ui);
			},
			opacity: 0.4,
			
			
		});
		
		
		

		$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
				.addClass( "ui-widget-header ui-corner-all" )
				.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
				.end()
			.find( ".portlet-content" );

		$( ".portlet-header .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
			$(this).parents("portlet").animate({opatcity:.5, height:'50%'});
		});
		
		$(".portlet").resizable({
			stop:function(event,ui){
					adjustWidth(event,ui);
			},
					
		});
		
	});
		
</script>
	
</head>
	
	<body>
		
			<div class="column">
				<div class="portlet">
					<div class="portlet-header">
						Shopping
					</div>
					<div class="portlet-content">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit
					</div>
				</div>
				
				<div class="portlet">
					<div class="portlet-header">
						Playing around
					</div>
					<div class="portlet-content">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit
					</div>
				</div>
				
				<div class="portlet">
					<div class="portlet-header">
						Cat :D
					</div>
					<div class="portlet-content">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit
					</div>
				</div>
				
				<div class="portlet">
					<div class="portlet-header">
						4th :O
					</div>
					<div class="portlet-content">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit
					</div>
				</div>
				
			</div>
			
			<div class="column">
				
				
			</div>
	
	</body>
	</html>

